<template>
    <div style="padding-bottom: 35px;">
        
        <div class="searchForm">
            <div>
                商品名称： <el-input size="small" v-model="search_form.goods_name" 
				placeholder="请输入商品名称"  style="width:300px;"></el-input>
            </div>
            <div>
                商品分类： 
				<el-input size="small" v-model="search_form.cate" placeholder="请输入商品分类"  
				style="width:150px;"></el-input>
            </div>
            <div>
                商品品牌： <el-input size="small" v-model="search_form.brand" placeholder="请输入商品品牌"  
				style="width:150px;"></el-input>
            </div>
			<div>
			    编码/助记码： <el-input size="small" v-model="search_form.code" 
				placeholder="请输入编码/助记码"  
				style="width:150px;"></el-input>
			</div>
            <div>
                <el-button type="primary" size="small" @click="search">检索</el-button>
                <el-button size="small" @click="clearSearch">重置/检索</el-button>
            </div>
        </div>
        <br>
        <el-table  :data="list"  
		     ref="multipleTable"
			 border  
			 style="width: 100%"
			 @selection-change="handleSelectionChange"
			>
			<el-table-column
			      type="selection"
			      width="55">
			    </el-table-column>
            <el-table-column   align="center"  width="200px"   
				label="编码/助记码">
				<template slot-scope="scope">
				   <div>
						<el-input  size="mini" v-model="scope.row.code"></el-input>
				   </div>
				</template>
			</el-table-column>
            <el-table-column  align="center" width="130px"  label="商品品牌">
				<template slot-scope="scope">
				   <div>
						<el-input  size="mini" v-model="scope.row.brand"></el-input>
				   </div>
				</template>
			</el-table-column>
             <el-table-column   align="center"  width="260px"   
				label="商品型号">
				<template slot-scope="scope">
				   <div>
						<el-input  size="mini" v-model="scope.row.goods_type"></el-input>
				   </div>
				</template>
			</el-table-column>
            <el-table-column   align="center"  width="350px"  label="商品名称">
				<template slot-scope="scope">
				   <div>
						<el-input  size="mini" v-model="scope.row.goods_name"></el-input>
				   </div>
				</template>
			</el-table-column>
		</el-table>
        <div class="page">
            <el-pagination
                    background
                    @size-change="pageChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page_totle">
            </el-pagination>
        </div>

    </div>
</template>
<script>
    export default {
        components:{
            
        },

        data(){
            return {
				list:[],
                pageSize:10,
                page:1,
                page_totle:0,
                search_form:{
                    goods_name:"",
					cate:"",
					brand:"",
					code:"",
                },
               
                selectGoods:[],
            }
        },
        mounted(){
            document.title = '商品管理'
			this.lodeList()
        },
        methods:{
			handleSelectionChange(val){
				this.$emit('getGoods',val)
			},
            pageChange(pageSize){
                this.page=1
                this.pageSize=pageSize
                this.lodeList()
            },
            handleCurrentChange(page){
                this.page=page
                this.lodeList()
            },
			lodeList(){
				let params = {
					search_form:this.search_form,
					page:this.page,
					pageSize:this.pageSize
				}
				this.$post('/goods/getGoodsList',params,res=>{
					let data = res.data.data
					this.page_totle = data.count
					this.list = data.result
				})
			},
            clearSearch(){
                    this.search_form  = {
                            goods_name:"",
                            cate:"",
                            brand:"",
							code:""
                    }
                    this.page=1
                    this.pageSize=10
                    this.lodeList()
            },
            search(){
                this.page = 1
				this.lodeList()
            },
        }
    }
</script>
